<template>
  <div :class="screenClass">
    <table-container
      v-model:columns="columns"
      v-model:is-fullscreen="isFullscreen"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <editTable
        :show-add="false"
        :table-data="renderData"
        :columns="columns"
      />
    </table-container>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import editTable from '@/common/components/edit-table/index.vue';
  import lodash from 'lodash';
  import useFullScreen from '@/common/hooks/fullScreen';
  import { payNodeTableRenderKeys } from './config';

  // const props = defineProps({
  //   editFlag: {
  //     type: Boolean,
  //     default: true,
  //   },
  // });
  const { isFullscreen, screenClass } = useFullScreen();

  const columns = ref<any[]>([...payNodeTableRenderKeys]);

  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const getData = async () => {
    isLoading.value = false;
    console.log('111');
  };
  onMounted(() => {
    // getData();
  });
</script>
